<template>
    <!-- 输入框搜索组件 -->
    <div class="dis-flex search">
        <div class="dis-flex search-left">
            <Button class="btn refresh" @click="refresh"><Icon type="ios-sync" /></Button>
            <Button class="btn addBtn"  @click="addModal"><Icon type="md-add" />添加</Button>
            <Button class="btn delete" @click="delAmides"><Icon type="ios-trash-outline" />删除</Button>
        </div>
        <div class="dis-flex search-right">
            <AutoComplete
                v-model="searchValue"
                placeholder="用户名/昵称/组别/Email/手机号码搜索"
                style="width:260px">
            </AutoComplete>
            <Button class="header-btn" @click="btnSearch"><Icon type="ios-search-outline" /></Button>
            <Button class="header-btn" @click="btnReset">重置</Button>
            <Button class="header-btn" @click="btnTest">测试接口按钮</Button>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import {adminInfo,adminList} from "@/api/account"
    export default {
        props: {
            dataList: Array,
            searchType: Array
        },
        data() {
            return {
                showModal: false,
                searchValue: "",
                dataListActive: [],
                formLeft: {
                    name: '',
                    ID_num: '',
                    phone: '',
                    file_num: ''
                }
            }
        },
        methods: {
            // 搜索内容重置
            btnReset() {
                this.searchValue = ""
                this.btnSearch()
            },
            /* 测试接口 */
            btnTest() {
                /* 获取用户详细信息 */
                /* adminInfo({
                    id: localStorage.userId ? localStorage.userId : sessionStorage.userId
                }).then(res=>{
                    console.log(res)
                }) */
                adminList({
                }).then(res=>{
                    console.log(res)
                })
            },
            ok () {
                this.dataList.push(this.formLeft)
                this.$Message.success('管理员添加成功');
            },
            cancel () {
                this.$Message.info('取消了添加管理员');
            },
            delAmides() {
                // console.log("删除管理员")
                this.$emit("delAmides", this.showModal)
                /* let diff = this.getSubtract(this.dataList, this.delete)
                this.dataListActive = diff */
            },
            addModal() {
                this.showModal = true
                this.$emit("addModal", this.showModal)
            },
            refresh() {
                // 刷新
                this.$emit("refresh")
            },
            // 数组求差集
            getSubtract(unionArr,subsetArr){
                let arr3 = unionArr.filter(v=>{
                    var str = JSON.stringify(v);
                    return subsetArr.every(v=>JSON.stringify(v)!=str);
                });
                return arr3
            },
            // 数据搜索
            btnSearch() {
                // console.log(this.$store.state)
                this.dataListActive = this.filterOne(this.dataList, this.searchValue, this.searchType)
                this.$emit("searchData", this.dataListActive)
            },
            /* 数组对象模糊查询 */ /* dataList 数组对象 value 输入框字段 type 对象 key 值 */
            filterOne(dataList, value, type) {
                var s = dataList.filter(function(item, index, arr) {
                    for (let j = 0; j < type.length; j++) {
                        if (item[type[j]] != undefined || item[type[j]] != null) {
                            if (item[type[j]].indexOf(value) >= 0) {
                                return item;
                            }
                        }
                    }
                });
                return s;
            }
        }
    }
</script>

<style lang="less" scoped>
.search {
    justify-content: space-between;
    .header-btn {
        margin-left: 15px;
    }
    .search-left {
        .btn {
            margin-right: 5px;
        }
    }
}
</style>